<template>
    <div>
        <Header></Header>
        <!-- banner -->
        <div class="search-container">
            <div class="search-wp">
                <div class="title">包含各类合同办公文档，为办公带来高效便利</div>
                <div class="mo-search-box  search-box">
                    <el-input v-model="searchData.value" class="w-50 m-2" placeholder="Pick a date" />
                    <!-- :suffix-icon="Calendar" -->
                </div>
                <div class="hot-keys">
                    热门关键词：<span>个人住房合同范本</span><span>劳务合同</span><span>婚内财产协议书</span><span>婚前协议书</span>
                </div>
            </div>
        </div>
    </div>
</template>
<script setup>

import { ref, reactive } from 'vue';
import axios from '@/server';
import Header from '@/components/header.vue'
const searchData = reactive({
    value: ''
})


</script>
<style lang="less" scoped>

.search-container {
    width: 1940px;
    margin: auto;

    .search-wp {
        background-image: url('@/assets/img/index-banner.png');
        background-size: 100% auto;
        width: 100%;
        height: 15.4vw;
        background-repeat: no-repeat;

        .title {
            font-size: 28px;
            color: #fff;
            text-align: center;
            padding-top: 4vw;
        }

        .hot-keys {
            text-align: center;
            font-weight: 400;
            font-size: 15px;
            line-height: 25px;
            color: #fff;
        }
    }
}

    .level1-dotted {
        border-top: 1px dashed rgba(0, 0, 0, .4);
        padding-top: 18px;
    }




</style>